<template>
    <view class="content">
		
		<uni-steps style="background-color: #FFFFFF;" :options="list1" :active="step" />
		
		<view class="an-loading" style="margin-top: 40px;" v-if="loading">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</view>
		
		<view v-else>
			
			<view class="input-group">
			    <view class="input-row" v-if="step === 0">
			        <text class="title">邮箱：</text>
			        <m-input type="text" focus clearable v-model="email" placeholder="请输入邮箱"></m-input>
			    </view>
				
				<view class="input-row" v-if="step === 1">
				    <text class="title">验证码：</text>
				    <m-input type="number" clearable v-model="code" placeholder="请输入邮箱收到的验证码"></m-input>
				</view>
				
				<view class="input-row" v-if="step === 2">
				    <text class="title">新密码：</text>
				    <m-input type="password"  clearable v-model="password" placeholder="请输入新的密码"></m-input>
				</view>
				<view class="input-row" v-if="step === 2">
				    <text class="title">再次输入：</text>
				    <m-input type="password"  clearable v-model="password2" placeholder="再输一遍新密码"></m-input>
				</view>
				
			</view>
			<view class="an-text-p" v-if="step === 1">请登录邮箱查看收到的验证码，不要关闭当前页面。</view>
			
			<view class="btn-row">
			    <button type="primary" class="an-btn-yuan an-gradients" @tap="findPassword">下一步</button>
			</view>
			
			
			
		</view>
        
		
		
		
    </view>
</template>

<script>
    import mInput from '../../components/m-input.vue';
	import uniSteps from '@/components/uni-steps/uni-steps.vue'
	import graceChecker from '@/common/graceChecker.js'
	import {createCode} from '@/common/util.js'
	import md5 from '@/common/md5.js'
	import {mapMutations} from 'vuex'
    export default {
        components: {
            mInput,
			uniSteps
        },
        data() {
            return {
				loading: false,
				onLoadCode:'',
                email: '',
				code:'',
				password:'',
				password2:'',
				step: 0,	// 步骤数
				list1: [{
					title: '填写邮箱'
				}, {
					title: '填写验证码'
				}, {
					title: '设置新密码'
				}],
				userInfo:{},
            }
        },
		onReady(){
			this.onLoadCode = createCode(6,'number')
		},
        methods: {
			...mapMutations(['logout']),
            findPassword() {
								
				if(this.step ===0){
					let rule = [
					      { name: "email", checkType: "email", checkRule: "", errorMsg: "请输入正确的邮箱地址" }
					];
					let checkRes = graceChecker.check({email:this.email}, rule);
					if(checkRes){
					    this.selectEmail()
					}else{
					    uni.showToast({ title: graceChecker.error, icon: "none" });
					}
				}else if(this.step === 1){ //验证码
					let rule = [
						  { name: "code", checkType: "notnull", checkRule: "", errorMsg: "请输入正确的验证码" }
					];
					let checkRes = graceChecker.check({code:this.code}, rule);
					if(checkRes){
					    if(this.code == this.onLoadCode){
							this.step = 2
						}else{
							uni.showToast({ title: '验证码错误', icon: "none" });
						}
					}else{
					    uni.showToast({ title: graceChecker.error, icon: "none" });
					}
				}else if(this.step === 2){	//填写密码
					let rule = [
						  { name: "password", checkType: "notnull", checkRule: "", errorMsg: "请填写密码" }
					];
					let checkRes = graceChecker.check({password:this.password}, rule);
					if(checkRes ){
						if(this.password === this.password2){
							this.editPassword()
						}else{
							uni.showToast({ title: '两次输入不一致', icon: "none" });
						}
					}else{
						uni.showToast({ title: graceChecker.error, icon: "none" });
					}
				}
                
            },
			selectEmail(){	// 查询邮箱
				let nd = {
					email: this.email
				}
				this.loading = true
				this.$api.getUserEmail(nd).then(res=>{
					this.loading = false
					this.userInfo = res
					if(graceChecker.isEmpty(res)){
						uni.showToast({
						    icon: 'none',
						    title: '邮箱尚未注册！'
						});
					}else{
						this.sendCode()
						uni.showToast({
						    title: '验证码已发送至邮箱！',
							duration: 2000
						});
						this.step = 1
					}
				})
			},
			sendCode(){	// 发送验证码
				let sr = "<div>您正在修改密码，<br/>您本次操作的验证码为:<strong>"+ this.onLoadCode +"</strong><br/>请确定是您本人操作！</div>"
				let nd = {
					email:this.email,
					title:'验证码',
					text:sr
				}
				this.$api.sendEmail(nd)
			},
			editPassword(){	// 修改密码
				console.log('修改密码')
				let nd = {
					userId: this.userInfo.id,
					oldPass: this.userInfo.password,
					pass: md5(this.password)
				}
				this.$api.editPassword(nd).then(res=>{
					this.password = ''
					uni.showToast({
					    title: '修改成功！',
					});
					setTimeout(()=>{
						this.logout();
						uni.reLaunch({
						    url: '../login/login',
						});
					},2000)
				})
			},
        }
    }
</script>

<style scoped>
.an-text-p{
	padding: 0 15px;
	color: #c55f5f;
}
.btn-row{
	padding: 10px 50px;
}
</style>
